iT邦幫忙

DAY 7
8

作個網站吧!系列 第 7

作個網站吧!HTML的二三事(1)-Psd to HTML

  • 分享至 

  • xImage
  •  

不知道各位怎麼切版的呢?Ps跟AI都有切片工具,方式從製作電子報到整頁Html的形式都有,看起來似乎是不難,但要切出靈活度高的網頁卻又是另外一回事兒。以下分享我的做法:
時間邁入第七天,發現原來我也可以發文連續一個禮拜耶!
真是太感動了,希望可以這樣維持這個勢頭到活動結束。(笑)

不知道各位怎麼切版的呢?Ps跟AI都有切片工具,方式從製作電子報到整頁Html的形式都有,看起來似乎是不難,但要切出靈活度高的網頁卻又是另外一回事兒。以下分享我的做法:

看到平面稿我會盡量先確認幾件事情:

  1. 瀏覽器向下相容到哪:
    代表著要花多少時間處理降級。
  2. 客戶用的瀏覽器版本以及螢幕大小(汗):
    遇過客戶電腦有問題,被罵的卻是窗口,所以能測就先測一下囉!
  3. 追PSD檔:
    給我一張JPG是要我練習去背嗎T_T。
  4. 索取(或Google)字型檔:
    中文部份如果不買服務卻要相應字型,有時會視情況動到檔案內的文字;
    英文的話如果沒有網路字型可支援也是一樣。
  5. 哪些部份會套後台?會怎麼顯示?:
    關係到後段的製作方式。
  6. 顏色問題:
    如果電腦有改過色彩設定比較會出現色差。

確認之後就開始下手囉!
前陣子參加過高雄前端社群的分享會時也做了一頁,現在剛好拿過來分享xD

判斷圖檔應該要用哪種檔案類型,例如Logo的話需要透明背景,切好後關閉背景圖層再轉存。

可以用CSS實現的部份就不用圖檔,同理能文字就不圖,還是切出範圍是因為要知道大小。

這裡的背景圖因為是整片延伸所以只切一小塊去CSS延伸就搞定。

上面那塊是因為圖片是朝右延伸的,只切一小塊丟CSS,下面是為了得知高度。

有圖示有漸層有文字,所以要分次處理,漸層可以CSS做到。

列表的作法。

相關品牌的做法:
因為不知道日後圖片會怎麼處理,所以圖片都切得剛好,其他就用CSS固定寬度排排站吧。

如果是固定區塊圖片可以直接切圓形,但如果是後台上傳,考慮到維護者方便,還是交給CSS!(天阿CSS好神)
純色、框線更不用說,當然不需要圖檔。

切完、存好、丟資料夾!呼終於可以進行下一步了~
今天的想就到這裡~希望各位都有看懂xD

以上文章同步發表於http://azzurro.blog.aznc.cc/make_a_website_7/


上一篇
作個網站吧!開始動手前(5)-優雅降級與漸進增強
下一篇
作個網站吧!HTML的二三事(2)-大小排列有關係
系列文
作個網站吧!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
廖洧杰
iT邦高手 2 級 ‧ 2013-10-07 20:35:00

PSDtoHTML真的有很多眉角要注意,
我也時常因為字型和美術討論個半天,
總覺得她一直在挑戰我的前端極限XDDD
謝謝分享哩^_^

tpodomoto iT邦新手 4 級 ‧ 2013-10-11 23:54:46 檢舉

也謝謝你跟其他人當天的分享!

我要留言

立即登入留言